
<script setup lang="ts">

import { ref, computed } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { showToast } from 'vant'
import { useCascaderAreaData } from '@vant/area-data'

const age: Ref<string> = ref('')
const columns = [
  { text: '男', value: 'man' },
  { text: '女', value: 'woman' },
];
const fieldValue1: Ref<string> = ref('')
const fieldValue2: Ref<string> = ref('')
const fieldValue3: Ref<string> = ref('')
const showPicker: Ref<boolean> = ref(false)
const showPicker3: Ref<boolean> = ref(false)


const cascaderValue: Ref<string> = ref('')
const sex: {
  text: string;
  value: string;
}[] = [
    { text: '男', value: 'man' },
    { text: '女', value: 'woman' },
  ];

function onConfirm({ selectedOptions }) {
  showPicker.value = false;
  fieldValue1.value = selectedOptions.map((sex) => sex.text)
  return {
    sex,
    onConfirm,
    fieldValue1,
    showPicker,
  }
}

// 地址选择
const show: Ref<boolean> = ref(false);
const fieldValue: Ref<string> = ref('');
// const cascaderValue: Ref<string> = ref('');
const options = useCascaderAreaData();
function onFinish({ selectedOptions }) {
  show.value = false;
  fieldValue2.value = selectedOptions.map((option) => option.text).join('/');

  return {
    show,
    options,
    onFinish,
    fieldValue2,
    cascaderValue,
  }
}

// 职业选择
const job: {
  text: string;
  value: string;
}[] = [
    { text: '党的机关、国家机关、群众团体和社会组织、企事业单位负责人', value: '1' },
    { text: '专业技术人员', value: '2' },
    { text: '办事人员和有关人员', value: '3' },
    { text: '社会生产服务和生活服务人员', value: '4' },
    { text: '农、林、牧、渔业生产及辅助人员', value: '5' },
    { text: '生产、运输设备操作人员及有关人员', value: '6' },
    { text: '军人', value: '7' },
    { text: '不便分类的其他从业人员', value: '8' },
  ]

function onConfirm2({ selectedOptions }) {
  showPicker3.value = false;
  fieldValue3.value = selectedOptions.map((job) => job.text)
  return {
    job,
    onConfirm2,
    fieldValue3,
    showPicker3,
  }
}

let flag: ComputedRef<boolean> = computed(() => {
  if (fieldValue1.value.length != 0 && fieldValue2.value.length != 0 && fieldValue3.value.length != 0 && age.value.length != 0) {
    return false
  } else {
    return true
  }
})


</script>
<template>
  <div class="personal">
    <van-nav-bar style="background-color: white" title="个人资料">
      <template #left>
        <p @click="$router.back()"><van-icon color="gray" name="arrow-left" /><span class="back">返回</span></p>
      </template>
    </van-nav-bar>
    <div class="vanCellGroup"></div>

    <van-cell-group inset>
      <van-field class="first" left-icon="music-o" label=" " model-value="修改头像" readonly />
      <!-- <van-field label="性别" model-value="女" /> -->
      <van-field v-model="fieldValue1" is-link readonly label="性别" placeholder="选择性别" @click="showPicker = true" />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="sex" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>

      <van-field label="年龄" v-model="age" />
      <van-field is-link readonly label="地址" v-model="fieldValue2" placeholder="请选择地址" @click="show = true" />
      <van-popup v-model:show="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
          @finish="onFinish" />
      </van-popup>

      <van-field v-model="fieldValue3" is-link readonly label="行业" placeholder="请选择您的职业" @click="showPicker3 = true" />
      <van-popup v-model:show="showPicker3" round position="bottom">
        <van-picker :columns="job" @cancel="showPicker3 = false" @confirm="onConfirm2" />
      </van-popup>
      <van-field label="兴趣爱好" model-value="购物 旅行 健身" />
    </van-cell-group>

    <van-button type="primary" :disabled="flag" size="normal" @click="$router.push('/user')">提交</van-button>


  </div>
</template>
<style lang="scss" scoped>
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.personal {
  height: 100%;
  background-color: #f5f5f5;
}


.van-button {
  width: 90%;
  margin-left: 5%;
  margin-top: 30px;
}

.back {
  color: blue;
}

.vanCellGroup {
  margin-top: 60px;
}

.van-field {
  border-bottom: 1px solid #f5f5f5;
}

.first {
  height: 100px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}
</style>

